<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品管理</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>

<div class="container-fluid">

    <div class="app-title">
        <div>
            <h1><i class="fa fa-circle-o"></i> 商品管理</h1>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><a href="welcome.html">首页</a></li>
            <li class="breadcrumb-item active">商品管理</li>
        </ul>
    </div>

    <div class="tile">

        <p class="form-inline">
            <input type="text" class="form-control mr-1" placeholder="商品号">
            <button type="button" class="btn btn-outline-primary mr-1">
                <i class="fa fa-search"></i>搜索
            </button>
            <a href="order_meal.html" class="btn btn-outline-success mr-1">
                <i class="fa fa-plus-square"></i>下单
            </a>
        </p>

        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                <tr class="bg-light">
                    <th>序号</th>
                    <th>用户昵称</th>
                    <th>标题</th>
                    <th>详情</th>
                    <th>上架时间</th>
                    <th>原价</th>
                    <th>现价</th>
                    <th>图片</th>
                    <th>所属学校</th>
                    <th>浏览次数</th>
                    <th>一级分类</th>
                    <th>二级分类</th>
                    <th width="100"></th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="goods in goods_arr">
                    <td v-text="goods.id">1</td>
                    <td v-text="goods.nickname">超级管理员</td>
                    <td v-text="goods.title">衣品天成短袖</td>
                    <td v-text="goods.intro">刚入手不久全新</td>
                    <td v-text="goods.created">2021-08-23 21:15:07</td>
                    <td v-text="goods.originalPrice">119.9</td>
                    <td v-text="goods.currentPrice">49</td>
                    <td><img :src="goods.url" height="80"></td>
                    <td v-text="goods.schoolName">广西大学</td>
                    <td v-text="goods.viewCount">1</td>
                    <td v-text="goods.categoryLevelone"></td>
                    <td v-text="goods.categoryLeveltwo"></td>
                    <td>
                        <a class="text-info"href="order_detail.html" title="查看"><i class="fa fa-lg fa-search-plus"></i></a>
                        <a class="text-info" data-toggle="modal" data-target="#myModal" title="修改"><i class="fa fa-lg fa-edit"></i></a>
                        <!-- 模态框（Modal） -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title" id="myModalLabel">修改商品信息</h4>
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    </div>
                                    <div class="modal-body">
                                        <form class="form-horizontal" role="form">
                                            <div class="form-group">
                                                <div class="col-sm-10">
                                                    id<input type="text" class="form-control" name="" :value="goods.id" readonly>
                                                </div>
                                                <div class="col-sm-10">
                                                    用户昵称<input type="text" class="form-control" name="" :value="goods.nickname" readonly>
                                                </div>
                                                <div class="col-sm-10">
                                                    商品名称<input type="text" class="form-control" name="" :value="goods.title">
                                                </div>
                                                <div class="col-sm-10">
                                                    商品描述<input type="text" class="form-control" name="" :value="goods.intro">
                                                </div>
                                                <div class="col-sm-10">
                                                    上架时间<input type="datetime-local" class="form-control" name="" :value="goods.created">
                                                </div>
                                                <div class="col-sm-10">
                                                    商品原价<input type="text" class="form-control" name="" :value="goods.originalPrice">
                                                </div>
                                                <div class="col-sm-10">
                                                    商品现价<input type="text" class="form-control" name="" :value="goods.currentPrice">
                                                </div>
                                                <div class="col-sm-10">
                                                    商品图片
                                                    <img class="form-control" :src="goods.url" name="url" width="100px">
                                                </div>
                                                <div class="col-sm-10">
                                                    所属学校
                                                    <select class="form-control">
                                                        <option v-for="school in school_arr" v-text="school.name">1</option>
                                                    </select>
                                                </div>
                                                <div class="col-sm-10">
                                                    浏览次数<input type="text" class="form-control" name="" :value="goods.viewCount" readonly>
                                                </div>
                                                <div class="col-sm-10">
                                                    一级分类
                                                    <select  class="form-control" v-model="leveloneId" @change="getLevelTwo(leveloneId)">
                                                        <option selected>请选择...</option>
                                                        <option v-for="levelone in levelone_arr" :value="levelone.id" v-text="levelone.name">1</option>
                                                </select>
                                                </div>
                                                <div class="col-sm-10">
                                                    二级分类
                                                    <select  class="form-control">
                                                        <option selected>请选择...</option>
                                                        <option v-for="leveltwo in leveltwo_arr" :value="leveltwo.id" v-text="leveltwo.name">1</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                        <button type="button" class="btn btn-primary">提交更改</button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal -->
                        </div>
                        <a class="text-danger" href="javascript:doRemove(0)" title="删除"><i
                                class="fa fa-lg fa-trash"></i></a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <!--分页-->
        <ul class="pagination">
            <li class="page-item disabled"><a class="page-link">«</a></li>
            <li class="page-item active"><a class="page-link">1</a></li>
            <li class="page-item"><a class="page-link">»</a></li>
        </ul>

    </div>
    <!-- /.tile -->
</div>
<!-- /.container-fluid -->

<!-- Essential javascripts for application to work-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<!-- Page specific javascripts-->
<script src="lib/layer/layer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    function doRemove(id) {
        layer.confirm("删除操作无法恢复，您确定要删除吗?", function () {
            layer.msg("已删除~");
        });
    }

    let goods_vm = new Vue({
        el: ".tile",
        data: {
            goods_arr: [{}],
            levelone_arr:[{}],
            leveloneId:0,
            leveltwo_arr:[{}],
            school_arr:[{}],
        },
        created: function () {
            axios.get("/v1/goods/findGoodsList").then(function (response) {
                goods_vm.goods_arr = response.data;
            });
            axios.get("/v1/levelone/findLeveloneList").then(function (response) {
                goods_vm.levelone_arr = response.data;
            });
            axios.get("/v1/school/findShoolList").then(function (response) {
                goods_vm.school_arr = response.data;
            })
        },
        methods:{
            getLevelTwo:function (leveloneId) {
                axios.get("/v1/leveltwo/findLeveltwoList?leveloneId="+leveloneId).then(function (response) {
                    goods_vm.leveltwo_arr = response.data;
                })
            }
        }
    })
</script>

</body>
</html>